@import "~assets/styles/_bootstrap";

.flow-warp {
	min-height: calc(100vh - 60px);
	padding-bottom: rem(65px);
	background: #F6F6F9;

	.address {
		position: relative;
		margin-bottom: rem(10px);
		background: #fff;

		&:before, &:after {
			content: " ";
			display: block;
			width: rem(20px);
			height: rem(6px);
			background: #000;
			transform:skew(-50deg,0deg);
			transform-origin: left bottom;
		}

		&:before {
			position: absolute;
			bottom: 0;
			left: 0;
			background: #32bdde;
	    box-shadow: rem(80px) 0 0 #32bdde, rem(160px) 0 0 #32bdde, rem(240px) 0 0 #32bdde, rem(320px) 0 0 #32bdde;
		}

		&:after {
			position: absolute;
			bottom: 0;
			left: rem(40px);
			background: #ec5151;
			box-shadow: rem(80px) 0 0 #ec5151, rem(160px) 0 0 #ec5151, rem(240px) 0 0 #ec5151, rem(320px) 0 0 #ec5151;
		}

		> a {
			display: block;
			padding: rem(20px) rem(30px) rem(20px) rem(20px);

			.infos {
				height: rem(24px);
				line-height: rem(24px);
				font-size: rem(14px);
				color: #333;

				> span {
					display: inline-block;
					padding-right: rem(10px);
				}

				> em {
					display: inline-block;
					color: #EC5151;
					padding-left: rem(10px);
				}
			}

			.position {
				line-height: rem(24px);
				color: #777;
				font-size: rem(14px);
			}

			> i {
				display: block;
		    position: absolute;
		    right: rem(5px);
		    top: 50%;
		    height: rem(30px);
		    line-height: rem(30px);
		    margin-top: rem(-15px);
			}
		}
	}

	.flow-order {

		.order-lists {
			margin-bottom: rem(10px);
			background: #fff;

			.o-title {
				display: flex;
				padding: 0 rem(10px);
				border-bottom: 1px solid #eae9e9;

				.o-icon {
					flex: 0 0 rem(30px);
					width: rem(30px);
					height: rem(40px);
			    -webkit-box-align: center;
			    -ms-flex-align: center;
			    align-items: center;
			    display: -webkit-box;

			    > i {
			    	font-size: rem(20px);
			    }
				}

				.o-name {
					height: rem(40px);
					line-height: rem(40px);
					font-size: rem(14px);
					color: #333;
				}
			}

			.o-list {
				border-bottom: 1px solid #eae9e9;

				.o-item {
					display: flex;
					padding: rem(10px);

					.o-img {
						flex: 0 0 rem(96px);
						width: rem(96px);
						margin-right: rem(10px);

						> a {
							display: block;
							width: rem(96px);
							height: rem(96px);
						}
					}

					.o-info {
						flex: 1;

						> a {
							line-height: rem(18px);
					    height: rem(36px);
					    font-size: rem(14px);
					    -webkit-line-clamp: 2;
					    -webkit-box-orient: vertical;
					    display: -webkit-box;
					    overflow: hidden;
						}

						.spec {
							line-height: rem(20px);
							font-size: rem(12px);
							color: #999;

							> span {
								margin-right: rem(10px);
							}
						}

						.price {
							height: rem(24px);
							line-height: rem(24px);

							.pri-cl {
								display: inline-block;
								color: #EC5151;
								font-size: rem(12px);
								font-weight: bold;
								> em {
									font-size: rem(16px);
								}
							}

							.pri-num {
								display: inline-block;
								margin-left: rem(20px);
								font-size: rem(12px);

								> em {
									font-size: rem(14px);
									margin-left: rem(2px);
								}
							}
						}

						.egd {
							line-height: rem(20px);

							> i {
								display: inline-block;
								height: rem(20px);
						    line-height: rem(18px);
						    border: 1px solid #EC5151;
						    color: #EC5151;
						    border-radius: rem(3px);
						    padding: 0 rem(5px);
						    font-size: rem(12px);
						    cursor: pointer;
							}

							> span {
								font-size: rem(12px);

								> em {
									font-size: rem(14px);
									color: #EC5151;
								}
							}
						}
					}
				}
			}

			.o-distr {
				padding: 0 rem(10px);

				.wrapper {
					display: flex;
					height: rem(50px);
					line-height: rem(50px);
					cursor: pointer;
					&.line {
						border-bottom: 1px solid #eae9e9;
					}

					> span {
						display: block;
					}

					.express {
						flex: 1;
						text-align: right;

						> span {
							color: #333;
						}

						> em {
							color: #EC5151;
						}
					}
				}

				.textarea {
					width: 100%;
					&.line {
						border-bottom: 1px solid #eae9e9;
					}

		    	> textarea {
						width: 100%;
				    height: 50px;
				    line-height: 25px;
				    font-family: '微软雅黑';
				    font-size: 14px;
				    color: #666;
				    vertical-align: top;
				    border: none;
		    	}

		    	> p {
		    		position: absolute;
		    		right: rem(8px);
		    		bottom: rem(3px);
		    		font-size: rem(11px);
		    		color: $grayLight;
		    	}
		    }
			}
		}
	}

	.o-bottom {
		position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #eae9e9;
    z-index: 99;
    background: #fafafc;

    .wrapper {
    	position: relative;
    	width: 100%;
    	height: rem(60px);
    	display: flex;

    	.o-price {
				flex: 1;
		    padding-left: rem(30px);
		    padding-top: rem(7px);

		    .total-price {
		    	color: #333;
		    	height: rem(24px);
		    	line-height: rem(24px);
		    	font-size: rem(16px);
		    	color: #333;

		    	> span {
		    		color: #EC5151;
	    			font-weight: bold;

	    			> em {
	    				padding-left: rem(3px);
							font-size: rem(16px);
	    			}
		    	}
		    }

		    .total-ig {
		    	height: rem(20px);
		    	line-height: rem(20px);

		    	> span {
		    		padding-right: rem(10px);

		    		.o-red {
		    			color: #EC5151;
    					font-weight: bold;
		    		}
		    	}
		    }
    	}

    	.o-submit {
    		flex: 0 0 rem(110px);
    		width: rem(110px);
    		padding: rem(10px);

    		> a {
    			display: block;
			    height: 100%;
			    line-height: rem(38px);
			    background: #EC5151;
			    border-radius: rem(4px);
			    text-align: center;
			    color: #fff;
    		}
    	}
    }
	}

	.flow-info {
		.invoice{
			background: #fff;
			margin-bottom: rem(10px);

			.wrapper {
				display: flex;
				padding: 0 rem(10px);
				height: rem(50px);
				line-height: rem(50px);
				&.line {
					border-bottom: 1px solid #eae9e9;
				}
				&.pointer {
					cursor: pointer;
				}

				> span {
					> em {
						padding-left: rem(10px);
				    color: #EC5151;
					}
				}

				.box-flex {
					flex: 1;
					text-align: right;

					> i {
						display: inline-block;
					}

					.check {
						-webkit-appearance: none;
						display: inline-block;
						width: rem(50px);
						height: rem(24px);
						border-radius: rem(20px);
						border: 1px solid #d4d4d6;
						background-color: #fff;
						vertical-align: middle;
    				margin-right: rem(20px);
    				cursor: pointer;
    				&:checked {
    					box-shadow: #dfdfdf 0 0 0 0 inset;
					    background-color: #64bd63;
					    transition: border-color 0.4s, background-color ease 0.4s;
					    &:before {
					    	left: rem(26px);
					    }
    				}
    				&:before {
    					content: '';
					    width: rem(22px);
					    height: rem(22px);
					    position: absolute;
					    top: 0px;
					    left: 0;
					    border-radius: rem(20px);
					    background-color: #fff;
					    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
					    transition: left 0.3s;
    				}
					}

					.price {
				    color: #EC5151;
				    font-size: rem(16px);
					}

					.inte {
						color: #EC5151;
				    font-size: rem(14px);
					}
				}
			}
		}
	}
}

.modalBean {
	
	.handle-context {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: auto;
    z-index: 2000;
	}


	&.dummy {

		.body > .section > .text {
			margin: 0;
			background: none;
		}

		ol {
			position: absolute;
			top: rem(400px);
			left: 50%;
			margin-left: rem(-123px);
			width: rem(246px);

			> p {
				margin-bottom: rem(15px);
			}
		}

		.power {
			position: absolute;
			top: rem(522px);
			left: 0;
			width: 100%;
			font-size: rem(12px);
			text-align: center;
			color: $grayLight;
		}

		.close {
	    position: absolute;
	    top: rem(164px);
  		right: rem(17px);
	    display: block;
			width: rem(32px);
			height: rem(32px);
			background: #ec5151;
			border-radius: 50%;
			z-index: 999;

			&:before {
		    position: absolute;
				display: block;
		    left: rem(7px);
		    right: 0;
		    top: rem(15px);
		    bottom: 0;
		    margin: auto;
		    width: 100%;
		    height: 100%;
				color: #fff;
				font-size: rem(18px);
			}
		}

	}

	.body {
		position: fixed;
		top: 0;
		left: 0;
		display: table;
		width: 100%;
		height: 100%;
		z-index: 2100;

		.section {
	    display: table-cell;
	    vertical-align: middle;
	    text-align: center;

	    .text {
		    margin: 0 10%;
		    background: #fff;
		    text-align: left;

		    > h2 {
			    width: 100%;
			    height: rem(50px);
			    line-height: rem(50px);
			    text-align: center;
			    font-size: rem(16px);
		    	color: #fff;
			    background: #0e90c9;
		    }

		    .main {
		    	padding: 0 rem(10px) rem(10px) rem(10px);

		    	.title {
		    		padding: rem(10px) 0;
		    		font-weight: bold;
		    		font-size: rem(13px);
		    		border-bottom: 1px solid $lineCol;
		    	}

		    	> p {
		    		padding-top: rem(5px);
		    		padding-left: rem(20px);
		    		line-height: rem(20px);
		    		font-size: rem(12px);

		    		> span {
		    			font-weight: bold;
		    		}
		    	}
		    }
	    }
		}
	}
}

.identValidate {
	padding: rem(5px) 0;

	span {
		display: block;
		padding: rem(12px);
		font-size: rem(15px);
		border-bottom: $lineCol 1px solid;
	}

	ol {

		> p {
			overflow: hidden;
			padding: rem(12px);

			> .input {
				float: left;
				width: rem(258px);
				height: rem(32px);
				line-height: rem(32px);
				border: none;
			}

			> .btn {
				float: right;
				width: rem(88px);
				height: rem(32px);
				line-height: rem(30px);
				text-align: center;
				background: #fbfbfb;
				border: #e5e5e5 1px solid;
				border-radius: rem(4px);
			}
		}

		> em {
			padding: 0 rem(12px) rem(5px);
			display: block;
			text-align: right;
			color: $mainCol;
		}
	}
}

.orderAddr-enter-active, .orderAddr-leave-active {
	transition: right 0.4s;
	right: 0!important;
}
.orderAddr-enter, .orderAddr-leave-active {
	transition: right 0.4s;
	right: -100%!important;
}